import {useDroppable} from '@dnd-kit/core';

export function Droppable(props) {
  const {isOver, setNodeRef} = useDroppable({
    id: 'droppable',
  });
  const style = {
    width:'100px',
    height:'100px',
    backgroundColor: isOver ? 'green' : 'red',
  };
  return (
    <div ref={setNodeRef} style={style}>
      {props.children}
    </div>
  );
}